<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/style.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/search.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/common.css"/>
    <script src="${pageContext.request.contextPath}/statics/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/js/jQuery3.4.1.js"></script>
    <script src="${pageContext.request.contextPath}/statics/js/bootstrap.bundle.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/js/Common.js"></script>

</head>

<body>
<div class="top">
    <%@include file="/common/top.jsp" %>


    <div class="filter-box">
        <div class="filter-box-main">
            <div class="search_logo" style="display: none;">
                <img src="./statics/img/Logo.png" alt="">
            </div>
            <div class="query-search">
                <div class="query-search_content">
                    <input type="text" class="query-search_content-input" name="key" id="key">
                    <button class="query-search_content-button" id="searchJob">
                        <i class="fa fa-search"></i>
                    </button>
                    <div class="jobsearch" style="display: none"></div>
                </div>
            </div>

        </div>
    </div>
</div>


<div class="jobInfo-main" id="table">
    <div class="jobInfo-center clearfix">
        <ul class="job-list">
            <c:forEach items="${sessionScope.employmentList}" var="jobList">
                <li class="joblist-box-item clearfix">
                    <div class="job-primary" href="${jobList.id}">
                        <div class="info-parimary">
                            <a class="primary-wrapper" href="javascript:gotoInfo(${jobList.id})" >
                                <div class="job-title"><span class="job-name">${jobList.name}</span></div>
                                <div class="job-limit">
                                    <span class="red">${jobList.wage}</span>
                                    <p>
                                            ${jobList.work_experience}
                                        <em class="vline"></em>${jobList.ed_background}
                                    </p>
                                </div>
                            </a>
                            <a class="info-company">
                                <div class="company-txt">
                                    <h3 class="name"><span class="job-name">${jobList.e_id}</span></h3>
                                    <p>
                                            ${jobList.pid}
                                        <em class="vline"></em> 已上市
                                    </p>
                                </div>

                                <img src="/hotel/show/${jobList.remake}" alt="">

                            </a>
                        </div>
                        <div class="info-append clearfix">
                            <div class="info-address">${jobList.workplace}</div>
                            <div class="info-desc">${jobList.treatment}</div>
                        </div>
                    </div>
                </li>

            </c:forEach>
        </ul>

        <div class="page">

            <c:if test="${sessionScope.employmentPages.prePage == 0}">
                <a href="javascript:" class="prev">
                    <i class="fa fa-angle-left"></i>
                </a>
            </c:if>
            <c:if test="${sessionScope.employmentPages.prePage != 0}">
                <a href="javascript:pages(${sessionScope.employmentPages.prePage})" class="prev disabled">
                    <i class="fa fa-angle-left"></i>
                </a>
            </c:if>

            <c:if test="${sessionScope.employmentPages.pages < 6 }">
                <c:if test="${sessionScope.employmentPages.pageNum < 6}">
                    <c:forEach items="${sessionScope.employmentPages.navigatepageNums}" var="pages" begin="0"
                               end="4" step="1">
                        <c:if test="${sessionScope.employmentPages.pageNum == pages}">
                            <a href="javascript:" class="cur">${pages}</a>
                        </c:if>
                        <c:if test="${sessionScope.employmentPages.pageNum != pages}">
                            <a href="javascript:pages(${pages})" class="">${pages}</a>
                        </c:if>
                    </c:forEach>
                </c:if>
            </c:if>


            <c:if test="${sessionScope.employmentPages.pages > 5}">
                <c:if test="${sessionScope.employmentPages.pageNum < 4}">
                    <c:forEach items="${sessionScope.employmentPages.navigatepageNums}" var="pages" begin="0" end="3"
                               step="1">
                        <c:if test="${sessionScope.employmentPages.pageNum == pages}"> <a href="javascript:"
                                                                                          class="cur">${pages}</a></c:if>
                        <c:if test="${sessionScope.employmentPages.pageNum != pages}"> <a
                                href="javascript:pages(${pages})" class="">${pages}</a></c:if>
                    </c:forEach>
                    <span>…</span>
                </c:if>


                <c:if test="${sessionScope.employmentPages.pageNum+2 < sessionScope.employmentPages.pages && sessionScope.employmentPages.pageNum > 3}">

                    <span>…</span>

                    <c:forEach items="${sessionScope.employmentPages.navigatepageNums}" var="pages"
                               begin="3"
                               end="5" step="1">

                        <c:if test="${sessionScope.employmentPages.pageNum == pages}">
                            <a href="javascript:" class="cur">${pages}</a>
                        </c:if>
                        <c:if test="${sessionScope.employmentPages.pageNum != pages}">
                            <a href="javascript:pages(${pages})" class="">${pages}</a>
                        </c:if>
                    </c:forEach>
                    <span>…</span>


                </c:if>


                <c:if test="${sessionScope.employmentPages.pageNum+2 >= sessionScope.employmentPages.pages}">
                    <span>…</span>
                    <c:forEach items="${sessionScope.employmentPages.navigatepageNums}" var="pages"
                               begin="4"
                               end="7" step="1">
                        <c:if test="${sessionScope.employmentPages.pageNum == pages}"> <a href="javascript:"
                                                                                          class="cur">${pages}</a></c:if>
                        <c:if test="${sessionScope.employmentPages.pageNum != pages}"> <a
                                href="javascript:pages(${pages})"
                                class="">${pages}</a></c:if>
                    </c:forEach>
                </c:if>

            </c:if>


            <c:if test="${sessionScope.employmentPages.nextPage == 0}">
                <a href="javascript:" class="next"><i
                        class="fa fa-angle-right"></i></a></c:if>
            <c:if test="${sessionScope.employmentPages.nextPage != 0}">
                <a href="javascript:pages(${sessionScope.employmentPages.nextPage})" class="next"><i
                        class="fa fa-angle-right"></i></a>
            </c:if>
        </div>
    </div>


</div>
<%@include file="/common/ubottom.jsp" %>


<script>
    $(window).scroll(function () {
        var top = $(window).scrollTop();
        if (top > 55) {
            $(".filter-box").addClass("filter-box-main-fixed");
            $(".search_logo").css("display", "block")

        } else {
            $(".filter-box").removeClass("filter-box-main-fixed");
            $(".search_logo").css("display", "none")
        }
    });

    function pages(page, key) {
        $.ajax({
            url: "/searchJob",//远程服务器端的设置
            data: {page: page, key: key},//用户点击的页码
            type: "post",//提交类型
            success: function (data) {
                $("html,body").animate({
                    scrollTop: '0px'
                });

                //重新加载分页显示的组件table
                //location.href---->http://localhost:8080/admin/login.action
                $("#table").load("http://localhost:8080/search.html #table");
            }
        })
    };


    /**
     * 搜索框联想
     */
    var tip = $('.jobsearch');
    $('#key').keyup(function () {
        let key = $(this).val();
        if (key != "") {
            $.ajax({
                url: "searchLX",
                data: {key: key},
                type: "POST",
                dataType: "json",
                success: function (data) {
                    var str = "";
                    for (var i = 0; i < data.length; i++) {
                        str += "<li style='padding-left: 11px;' onclick='writeContent(this)'  >" + data[i].key + "</li>";
                    }
                    tip.html(str)
                    tip.css("display", "block")
                },
                error: function () {
                    console.log("请求失败了！！！")
                }
            })
        } else {
            tip.html("")
            tip.css("display", "none")
        }
    })
    $("#searchJob").click(function () {
        var key = $('#key').val()
        pages(1, key);
    })

    function gotoInfo(id) {
        $.ajax({
            url: "/infoJob",//远程服务器端的设置
            data: {id: id},
            type: "post",//提交类型
            success: function (data) {
                window.open("/info.html")
            }
        })
    }
</script>


</body>

</html>